﻿@import "Common.less";

@default-chart-blue: rgb(70, 130, 180);
@circle-border: rgba(60, 60, 60, 1);

#spark-detail {
    display: none;
    h2 {
        color: white;
        padding-bottom: 5px;

        .right-side {
            float: right;   
        }
    }
    .current-label {
        color: #EEEEEE;
    }
}

.d3-chart(@chart-color: @default-chart-blue) {
    path {
        //fill: fadeout(@chart-color, 50%);
        fill: @chart-color;
        &.area {
            //stroke: @chart-color;
        }
        &.line {
            fill: none;
            stroke-width: 1px;
            stroke: @chart-color;
        }
    }
    .current-area circle {
        fill: @chart-color;
    }
}
.d3-multi-chart(@chart-color: @default-chart-blue, @seriesName: main, @fadeOut: 50%) {
    path.series-@{seriesName} {
        fill: fadeout(@chart-color, @fadeOut);
        &.area {
            stroke-width: 1px;
            stroke: @chart-color;
        }
        &.line {
            fill: none;
            stroke-width: 1px;
            stroke: @chart-color;
        }
    }
    .legend-block.series-@{seriesName} {
        background: @chart-color;
    }
    .current-area circle.series-@{seriesName} {
        fill: @chart-color;
    }
    span.series-@{seriesName} {
        color: @chart-color;
    }
}

.chart {
    position: relative;
    .chart-title {
        margin-top: 10px;
        text-align: center;
        font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #3E576F;
        text-shadow: 1px 1px 3px #ffffff;
        position: relative;
        .chart-subtitle {
            font-size: 12px;
            color: #6D869F;
            text-align: center;
        }
    }

    svg {
        font: 10px sans-serif;
    }
    &.cpu-chart {
        .d3-chart();
    }        
    &.memory-chart {
        .d3-chart(rgb(191, 94, 91));
    }
    &.network-chart {
        .d3-multi-chart(rgb(181, 137, 0), main_in, 40%);
        .d3-multi-chart(rgb(42, 161, 152), main_out, 40%);
        //.d3-multi-chart(rgb(181, 137, 0), main_in);
        //.d3-multi-chart(rgb(42, 161, 152), main_out);
    }
    &.haproxy-traffic-chart {
        .d3-multi-chart(@default-chart-blue, main_hits, 80%);
        .d3-multi-chart(rgb(191, 94, 91), main_pages, 80%);
    }   
    .current-area circle {
        stroke: @circle-border;
    } 
    .axis {
        path, line {
            fill: none;
            stroke: #BBB;
            shape-rendering: crispEdges;
        }
        &.y {
            path, line {
                fill: none;
                stroke: #000000;
                shape-rendering: crispEdges;
                stroke-width: 1px;
                stroke-opacity: 0.06;
            }
        }
    }
    .axis text, .chart-tooltip, .range-selection {
        -webkit-user-select: none;
        -moz-user-select: none; 
        -ms-user-select: none;
        user-select: none;
    }
    .cross-line {
        stroke: #000000;
        stroke-opacity: 0.1;
    }
    .brush .extent {
        stroke: #fff;
        fill-opacity: .125;
        shape-rendering: crispEdges;
    }
    .chart-tooltip {
        padding: 5px;
        border-radius: 5px;
        width: auto;
        display: none;
        box-shadow: 2px 2px 6px #444;
        position: absolute;
        background-color: white;
        white-space: nowrap;
        z-index: 5;
        border: solid 1px #EEE;

        .note {
            color: #AAA;
        }
        .tooltip-date {
            padding-bottom: 2px;
        }
    }    
    .build-tooltips {
        z-index: 3;
    }
    .build-tooltip {
        z-index: 3;

        .label {
            color: #888;
        }
    }
    .build-dot {
        z-index: 3;
    }
    .area-tooltip-line {
        stroke: #fff;
        stroke-width: 1px;
    }
    .range-selection {
        position: absolute;
        top: 10px;
        left: 10px;

        button {
            box-shadow: inset 0 1px 0 0 #ffffff;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
            background: -moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
            background-color: #ededed;
            border-radius: 6px;
            border: 1px solid #dcdcdc;
            display: inline-block;
            color: #777777;
            font-family: arial;
            font-size: 11px;
            font-weight: bold;
            padding: 3px 10px;
            text-decoration: none;
            text-shadow: 1px 1px 0 #ffffff;
            &:hover {
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
                background: -moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
                background-color: #dfdfdf;
            }
            &:active {
                position: relative;
                top: 1px;
            }
        }
    }
}

#svg-export {
    display: none;
}

/* Graphs */
.graph-loading 
{
    padding-top: 170px;
    text-align: center;
}
.history-graph-wrap {
    border-radius: 6px;
    border: @grey-border;
    margin: 4px 4px 10px 4px;

    &.half-width {
        width: 49%;
        display: inline-block;
        float: left;
    }

    .history-graph {
        height: 300px;
        min-width: 500px;    
    }
}

#cpu-graph {
    padding: 10px;

    .core-container {
        display: none;
    }
    .cpu-core {
        border: solid 1px #f4f4f4;
        display: inline-block;
        height: 100px;
        position: relative;
    }
    .cpu-core-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0.8;
        background: #678FC0;
        background: -moz-linear-gradient(top, #678FC0 0, #4572A7 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #678FC0), color-stop(100%, #4572A7));
        background: -webkit-linear-gradient(top, #678FC0 0, #4572A7 100%);
        background: -o-linear-gradient(top, #678FC0 0, #4572A7 100%);
        background: -ms-linear-gradient(top, #678FC0 0, #4572A7 100%);
        background: linear-gradient(to bottom, #678FC0 0, #4572A7 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#678FC0', endColorstr='#4572A7', GradientType=0);
    }
    .core-label {
        z-index: 5;
        color: #CCC;
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 2px;
    }
    .core-count-wrap {
        color: #EEE;
    }
    .core-count {
        color: #666;
    }
    #cpu-total-graph {
        width: 800px;
        height: 300px;
    }
    .show-more {
        display: none;
    }
}